<!--
 * @Author: LAB
 * @Date: 2021-05-18 11:40:44
 * @Description: 发药规则
 * @FilePath: \client-app\src\views\dispensing-rules\dispensing-rules.vue
-->
<template>
  <div style="height: 100%">
    <el-row style="height: 100%">
      <el-col class="content-left" :span="12"
        ><div class="head">
          <div class="head-left">
            <b>目录类型</b>
            <div>
              <DxSelectBox
                width="150"
                :items="simpleProducts"
                height="30"
                stylingMode="outlined"
              />
            </div>
            <b>目录方案</b>
            <div>
              <DxSelectBox
                width="150"
                :items="simpleProducts"
                height="30"
                stylingMode="outlined"
              />
            </div>
          </div>

          <div class="head-right">
            <b>显示</b>
            <div>
              <DxSelectBox
                width="150"
                :items="simpleProducts"
                height="30"
                stylingMode="outlined"
              />
            </div>
          </div>
        </div>
        <div class="treeview-content">
          <div>
            <div class="treeview-content-tree-title">
              <DxCheckBox style="margin-left: 16px" />
              <b style="margin-left: 10px">全选</b>
            </div>
            <DxTreeView
              id="treeview"
              class="treeview"
              :ref="treeViewRef"
              :width="340"
              :items="employees"
              :show-check-boxes-mode="showCheckBoxesModeValue"
              :selection-mode="selectionModeValue"
              :select-nodes-recursive="selectNodesRecursiveValue"
              :select-by-click="selectByClickValue"
              @selection-changed="treeViewSelectionChanged"
              @content-ready="treeViewContentReady"
            >
              <template #item="item">
                {{ item.data.fullName + " (" + item.data.position + ")" }}
              </template>
            </DxTreeView>
          </div>
          <div>
            <div class="treeview-content-title">
              <span>对应规格</span>
            </div>
            <div>
              <DxDataGrid
                id="grid-container"
                :data-source="dataSource"
                :show-borders="true"
                :remote-operations="false"
                height="750px"
                showRowLines="true"
              >
                <DxPaging :enabled="false" />
                <DxScrolling column-rendering-mode="virtual" />
                <DxSorting mode="none" />
                <DxColumn
                  :allow-editing="false"
                  data-field="City"
                  cell-template="cellTemplate"
                  caption="全选"
                  alignment="center"
                />
                <DxColumn data-field="ID" caption="编码" alignment="center" />
                <DxColumn data-field="CompanyName" caption="药品品种" alignment="center" />
                <DxColumn data-field="Address" caption="规格" alignment="center" />
                <DxColumn data-field="State" caption="发药类型" alignment="center" />

                <template #cellTemplate="">
                  <div class="cellTemplate">
                    <DxCheckBox style="margin-left: 16px" v-model:value="isselect" />
                  </div>
                </template>
              </DxDataGrid>
            </div>
            <div>
              <div class="butdiv">
                <span>发药类型设置为：</span>
                <DxCheckBox style="margin-left: 16px" text="门诊" />
                <DxCheckBox style="margin-left: 16px" text="住院" />
                <DxCheckBox style="margin-left: 16px" text="体检" />
                <DxButton
                  style="width: 120px; background: #576ee4; float: right"
                  text="确定"
                  type="normal"
                  styling-mode="text"
                />
              </div>
            </div>
          </div>
        </div>
      </el-col>


      <el-col class="content-right" :span="12">

          <div class="contnt-center-content">
          <!-- <DxButton
            style="background: rgb(96 196 255); height: 48px"
            text=">"
            type="normal"
            styling-mode="text"
          /> -->
           <el-button type="primary"><i class="el-icon-caret-right"></i></el-button>
        </div>

        <div class="content-right-content" >
          <div class="content-right-title">
          <div><span>发药规则</span></div>
          <div class="content-right-title-button">
            <DxButton class="button-c3c3c3-margin10" text="导出" type="normal" styling-mode="text" />
            <DxButton class="button-c3c3c3-margin10"  text="保存 " type="normal" styling-mode="text" />
          </div>
          </div>
          <div>
            <DxTabPanel
              :data-source="longtabs"
              v-model:selected-index="selectedIndex"
              :loop="loop"
              :animation-enabled="animationEnabled"
              :swipe-enabled="swipeEnabled"
            >
              <template #title="{ data: v }">
                {{ v.text }}
              </template>
              <template #item="">
           
             <div>
              <DxDataGrid
                id="grid-container"
                :data-source="dataSource"
                :show-borders="true"
                :remote-operations="false"
                height="800px"
                showRowLines="true"
              >
                <DxPaging :enabled="false" />
                <DxScrolling column-rendering-mode="virtual" />
                <DxSorting mode="none" />
                <DxColumn data-field="ID" caption="编码"  alignment="center" />
                <DxColumn data-field="CompanyName" caption="药品品种" alignment="center" />
                <DxColumn data-field="Address" caption="规格" alignment="center" />
              </DxDataGrid>
            </div>
              </template>
            </DxTabPanel>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Inject, Watch } from "vue-property-decorator";
import DataSource from "devextreme/data/data_source";
import DxTabs from "devextreme-vue/tabs";
import Tree from "@/framework/components/tree/tree.vue";
import { ElRow, ElCol, ElCheckbox,ElButton,ElIcon } from "element-plus";
import DxSelectBox from "devextreme-vue/select-box";
import DxTreeView from "devextreme-vue/tree-view";
import DxCheckBox from "devextreme-vue/check-box";
import DxButton from "devextreme-vue/button";
import DxTabPanel from "devextreme-vue/tab-panel";
import {
  DxDataGrid,
  DxColumn,
  DxEditing,
  DxPaging,
  DxSearchPanel,
  DxExport,
  DxSorting,
  DxPager,
} from "devextreme-vue/data-grid";
let formData: any = {};
let self: any;
const settingTabs = [
  {
    id: "GrugSku",
    text: "药品规格",
    content: "User tab content",
  },
  {
    id: "ProductType",
    text: "售价记录",
    content: "Comment tab content",
    disabled: true,
  },
  {
    id: "RepaySetting",
    text: "成本价记录",
    content: "Find tab content",
    disabled: true,
  },
  {
    id: "Agreement",
    text: "费别等级",
    content: "Find tab content",
    disabled: true,
  },
  {
    id: "Agreement",
    text: "协定药品",
    content: "Find tab content",
    disabled: true,
  },
  {
    id: "Agreement",
    text: "自制药品",
    content: "Find tab content",
    disabled: true,
  },
  {
    id: "Agreement",
    text: "中标单位",
    content: "Find tab content",
    disabled: true,
  },
  {
    id: "Agreement",
    text: "配伍禁忌",
    content: "Find tab content",
    disabled: true,
  },
  {
    id: "Agreement",
    text: "存储设置",
    content: "Find tab content",
    disabled: true,
  },
];
@Options({
  components: {
    Tree,
    DxTabPanel,
    DxTabs,
    DxTreeView,
    ElRow,
    ElCol,
    ElCheckbox,
    DxSelectBox,
    DxCheckBox,
    DxDataGrid,
    DxColumn,
    DxEditing,
    DxPaging,
    DxSearchPanel,
    DxExport,
    DxSorting,
    DxPager,
    DxButton
    ,ElButton,ElIcon
  },
})
export default class DispensingRules extends Vue {
  @Inject()
  formData: any;
  openTab = 0;
  isselect=false;
  settingTabs = settingTabs;
  employees = [
    {
      id: 1,
      fullName: "John Heart",
      prefix: "Dr.",
      position: "CEO",
      expanded: true,
      items: [
        {
          id: 2,
          fullName: "Samantha Bright",
          prefix: "Dr.",
          position: "COO",
          expanded: true,
          items: [
            {
              id: 3,
              fullName: "Kevin Carter",
              prefix: "Mr.",
              position: "Shipping Manager",
            },
            {
              id: 14,
              fullName: "Victor Norris",
              prefix: "Mr.",
              selected: true,
              position: "Shipping Assistant",
            },
          ],
        },
        {
          id: 4,
          fullName: "Brett Wade",
          prefix: "Mr.",
          position: "IT Manager",
          expanded: true,
          items: [
            {
              id: 5,
              fullName: "Amelia Harper",
              prefix: "Mrs.",
              position: "Network Admin",
            },
            {
              id: 6,
              fullName: "Wally Hobbs",
              prefix: "Mr.",
              position: "Programmer",
            },
            {
              id: 7,
              fullName: "Brad Jameson",
              prefix: "Mr.",
              position: "Programmer",
            },
            {
              id: 8,
              fullName: "Violet Bailey",
              prefix: "Ms.",
              position: "Jr Graphic Designer",
            },
          ],
        },
        {
          id: 9,
          fullName: "Barb Banks",
          prefix: "Mrs.",
          position: "Support Manager",
          expanded: true,
          items: [
            {
              id: 10,
              fullName: "Kelly Rodriguez",
              prefix: "Ms.",
              position: "Support Assistant",
            },
            {
              id: 11,
              fullName: "James Anderson",
              prefix: "Mr.",
              position: "Support Assistant",
            },
          ],
        },
      ],
    },
  ];
  longtabs = [
    { text: "门诊发药 ", id: "0" },
    { text: "住院发药", id: "1" },
    { text: "体检发药", id: "1" },
  ];
  dataSource = [
    {
      ID: 1,
      CompanyName: "Premier Buy",
      Address: "7601 Penn Avenue South",
      City: "Richfield",
      State: "Minnesota",
      Zipcode: 55423,
      Phone: "(612) 291-1000",
      Fax: "(612) 291-2001",
      Website: "http =//www.nowebsitepremierbuy.com",
    },
    {
      ID: 2,
      CompanyName: "ElectrixMax",
      Address: "263 Shuman Blvd",
      City: "Naperville",
      State: "Illinois",
      Zipcode: 60563,
      Phone: "(630) 438-7800",
      Fax: "(630) 438-7801",
      Website: "http =//www.nowebsiteelectrixmax.com",
    },
    {
      ID: 3,
      CompanyName: "Video Emporium",
      Address: "1201 Elm Street",
      City: "Dallas",
      State: "Texas",
      Zipcode: 75270,
      Phone: "(214) 854-3000",
      Fax: "(214) 854-3001",
      Website: "http =//www.nowebsitevideoemporium.com",
    },
    {
      ID: 4,
      CompanyName: "Screen Shop",
      Address: "1000 Lowes Blvd",
      City: "Mooresville",
      State: "North Carolina",
      Zipcode: 28117,
      Phone: "(800) 445-6937",
      Fax: "(800) 445-6938",
      Website: "http =//www.nowebsitescreenshop.com",
    },
    {
      ID: 5,
      CompanyName: "Braeburn",
      Address: "1 Infinite Loop",
      City: "Cupertino",
      State: "California",
      Zipcode: 95014,
      Phone: "(408) 996-1010",
      Fax: "(408) 996-1012",
      Website: "http =//www.nowebsitebraeburn.com",
    },
    {
      ID: 6,
      CompanyName: "PriceCo",
      Address: "30 Hunter Lane",
      City: "Camp Hill",
      State: "Pennsylvania",
      Zipcode: 17011,
      Phone: "(717) 761-2633",
      Fax: "(717) 761-2334",
      Website: "http =//www.nowebsitepriceco.com",
    },
    {
      ID: 7,
      CompanyName: "Ultimate Gadget",
      Address: "1557 Watson Blvd",
      City: "Warner Robbins",
      State: "Georgia",
      Zipcode: 31093,
      Phone: "(995) 623-6785",
      Fax: "(995) 623-6786",
      Website: "http =//www.nowebsiteultimategadget.com",
    },
    {
      ID: 8,
      CompanyName: "EZ Stop",
      Address: "618 Michillinda Ave.",
      City: "Arcadia",
      State: "California",
      Zipcode: 91007,
      Phone: "(626) 265-8632",
      Fax: "(626) 265-8633",
      Website: "http =//www.nowebsiteezstop.com",
    },
    {
      ID: 9,
      CompanyName: "Clicker",
      Address: "1100 W. Artesia Blvd.",
      City: "Compton",
      State: "California",
      Zipcode: 90220,
      Phone: "(310) 884-9000",
      Fax: "(310) 884-9001",
      Website: "http =//www.nowebsiteclicker.com",
    },
    {
      ID: 10,
      CompanyName: "Store of America",
      Address: "2401 Utah Ave. South",
      City: "Seattle",
      State: "Washington",
      Zipcode: 98134,
      Phone: "(206) 447-1575",
      Fax: "(206) 447-1576",
      Website: "http =//www.nowebsiteamerica.com",
    },
    {
      ID: 11,
      CompanyName: "Zone Toys",
      Address: "1945 S Cienega Boulevard",
      City: "Los Angeles",
      State: "California",
      Zipcode: 90034,
      Phone: "(310) 237-5642",
      Fax: "(310) 237-5643",
      Website: "http =//www.nowebsitezonetoys.com",
    },
    {
      ID: 12,
      CompanyName: "ACME",
      Address: "2525 E El Segundo Blvd",
      City: "El Segundo",
      State: "California",
      Zipcode: 90245,
      Phone: "(310) 536-0611",
      Fax: "(310) 536-0612",
      Website: "http =//www.nowebsiteacme.com",
    },
    {
      ID: 13,
      CompanyName: "Super Mart of the West",
      Address: "702 SW 8th Street",
      City: "Bentonville",
      State: "Arkansas",
      Zipcode: 72716,
      Phone: "(800) 555-2797",
      Fax: "(800) 555-2171",
      Website: "http://www.nowebsitesupermart.com",
    },
    {
      ID: 14,
      CompanyName: "Electronics Depot",
      Address: "2455 Paces Ferry Road NW",
      City: "Atlanta",
      State: "Georgia",
      Zipcode: 30339,
      Phone: "(800) 595-3232",
      Fax: "(800) 595-3231",
      Website: "http =//www.nowebsitedepot.com",
    },
    {
      ID: 15,
      CompanyName: "K&S Music",
      Address: "1000 Nicllet Mall",
      City: "Minneapolis",
      State: "Minnesota",
      Zipcode: 55403,
      Phone: "(612) 304-6073",
      Fax: "(612) 304-6074",
      Website: "http =//www.nowebsitemusic.com",
    },
    {
      ID: 16,
      CompanyName: "Tom's Club",
      Address: "999 Lake Drive",
      City: "Issaquah",
      State: "Washington",
      Zipcode: 98027,
      Phone: "(800) 955-2292",
      Fax: "(800) 955-2293",
      Website: "http =//www.nowebsitetomsclub.com",
    },
    {
      ID: 17,
      CompanyName: "E-Mart",
      Address: "3333 Beverly Rd",
      City: "Hoffman Estates",
      State: "Illinois",
      Zipcode: 60179,
      Phone: "(847) 286-2500",
      Fax: "(847) 286-2501",
      Website: "http =//www.nowebsiteemart.com",
    },
    {
      ID: 18,
      CompanyName: "Walters",
      Address: "200 Wilmot Rd",
      City: "Deerfield",
      State: "Illinois",
      Zipcode: 60015,
      Phone: "(847) 940-2500",
      Fax: "(847) 940-2501",
      Website: "http =//www.nowebsitewalters.com",
    },
    {
      ID: 19,
      CompanyName: "StereoShack",
      Address: "400 Commerce S",
      City: "Fort Worth",
      State: "Texas",
      Zipcode: 76102,
      Phone: "(817) 820-0741",
      Fax: "(817) 820-0742",
      Website: "http =//www.nowebsiteshack.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
  ];

  // 页面刷新
  refresh() {
    this.$router.replace({ path: "/refresh" });
  }
}
</script>

<style scoped lang="scss">
.grup-body {
  display: flex;
  justify-content: space-evenly;
}
.header-input {
  input {
    padding: 0 !important;
  }
}
.head {
  padding: 12px;
  line-height: 30px;
  height: 50px;
  background: white;
  box-shadow: 0px 0px 3px 0px #8b8b8b, 0px 20px 20px -20px #8b8b8b;
}
.dx-selectbox {
  line-height: 10px;
}
.head-left div,
.head-right div {
  margin-left: 10px;
  margin-right: 5x;
}
.head-left {
  display: flex;
  float: left;
}
.head-right {
  display: flex;
  float: right;
}
.content-left {
  box-shadow: 0px 0px 3px 0px #8b8b8b, 0px 20px 20px -20px #8b8b8b;
  background: rgb(223, 223, 223);
}
.contnt-center,
.content-right {
  background: rgb(223, 223, 223);
   display: flex;
}
.treeview {
  background: white;
  height: "100%";
}
.treeview-content {
  margin-top: 1px;
  display: flex;
}
.treeview-content-tree-title {
  display: flex;
  background: white;
  padding: 10px;
  border-bottom: 1px solid rgb(205, 205, 205);
}
.treeview-content-title {
  padding: 10px;
}
.butdiv {
  padding: 30px;
  background: whitesmoke;
}

.content-right-title {
   padding: 15px 0px 0px 0px;
  display: flex;
  height: 50px;
}
.content-right-title-button {
      width: 90%;
    text-align: right;
}
.button-c3c3c3-margin10{
  margin-left: 10px;
  margin-right:  10px;
  background:#c3c3c3;
}
.contnt-center-content{
  line-height: 60;
  padding: 10px;
  width: 100px;
}
button{

        height: 40px;
    width: 40px;
    text-align: center;
    padding: 0;
}
</style>
